<template>
  <div class="">
    <h1>车辆管理页面</h1>

    <add @add="add" @search="search" />
    <!-- 添加部分 -->

    <!-- 列表子组件 -->
    <list :list="list" @remove="remove" />
  </div>
</template>

<script>
import list from "../components/List.vue";
import add from "@/components/Add.vue";
export default {
  data() {
    return {
      list: [
        { id: 1, title: "劳斯莱斯幻影", price: 2000000, time: new Date() },
        { id: 2, title: "宾利", price: 2000000, time: new Date() },
        { id: 3, title: "特斯拉", price: 2000000, time: new Date() },
        { id: 4, title: "布加迪威龙", price: 2000000, time: new Date() },
        { id: 5, title: "林肯加长", price: 2000000, time: new Date() },
      ],
      copylist: [],
    };
  },
  mounted() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
    //如果本地存贮中存的有list，就从本地存储中拿

    this.copylist = this.list;
    //把list的值备份给copylist，放在生命周期函数中的意思是当这个页面加载完成后 就会备份这个数据
  },
  //这是一个生命周期函数 这个函数在组件挂载完成（加载完成后）会自动调用
  methods: {
    // add() {
    //   this.list.push({
    //     id: this.id,
    //     title: this.title,
    //     time: new Date(),
    //   });
    //   this.id = "";
    //   this.title = "";
    // },
    //这是没封装添加子组件之前的添加方法  这个时候 id和title都在这个页面中

    add(id, title, price) {
      this.list.push({ id: id, title: title, price, time: new Date() });
    },

    remove(index) {
      this.list.splice(index, 1);
      //splice方法是用来删除数组的 从哪个下标开始删除 几个
      // console.log("这是父组件的删除方法");
    },
    // search() {
    //   this.list = this.copylist.filter((item) => {
    //     return item.title.includes(this.keyword);
    //   });

    //   // 数组的方法filter 过滤方法 过滤出符合条件的item 返回在一个新数组中，并且不改变原数组
    //   // includes也是数组，字符串的方法  判断数组或者字符串中是否包含某一个值 如果包含就反悔true 否则就返回false
    //   // indexOf 也可以判断 是否含有某一项 如果有就返回 下标 没有就返回-1
    // },
    //以上是没有封装add子组件的搜索  这个时候keyword在父组件
    search(keyword) {
      this.list = this.copylist.filter((item) => {
        return item.title.includes(keyword);
      });
    },
  },
  components: {
    list,
    add,
  },
  watch: {
    list(newval) {
      localStorage.setItem("list", JSON.stringify(newval));
    },
    // 当数据发生改变 就把这个数据存在本地存储中
  },
};
</script>

<style lang="scss"></style>
